<template>
  <div class="">
    <div id="map" :style="{ height: '800px', width: '100%' }"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

const wuhanJson = require("../assets/map/wuhan.json")
export default {
  name: 'HuBeiMap',
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let myChart = echarts.init(document.getElementById('map'));
      echarts.registerMap('wuhan', wuhanJson);
      let option = {
        title: {
          text: '武汉地图',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          confine: true
        },
        visualMap: {
          min: 0,
          max: 100,
          text: ['高', '低'],
          realtime: false,
          calculable: true,
          itemWidth: 10,
          itemHeight: 70,
          inRange: {
            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
          }
        },
        series: [
          {
            name: '',
            type: 'map',
            // zoom: 1.4,
            label: {
              show: false
            },
            mapType: 'wuhan', // 自定义扩展图表类型
            itemStyle: {
              // normal: {label: {show: true}},
              emphasis: {label: {show: true}},
              normal: {
                label: {
                  show: true,
                  textStyle: {
                    color: '#444'
                  }
                },
              }
            },
            data: [],
          }
        ]
      };
      // option.title.text = data.title;
      // option.visualMap.max = data.max;
      // option.series[0].name = data.name;
      // option.series[0].data = data.data;
      myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    }
  }
}
</script>
